<template>
	<view class="">
		<u-navbar :is-back="true" title="请选择按课请假" back-icon-color="#ffffff" title-color="#ffffff"
			:background="{backgroundColor:'#E62131'}"></u-navbar>
		<view class="atopheig" style="padding: 0 30rpx 60rpx;">
			<view class="topchenlistd">
				<div style="width: 100%;display: flex;align-items: center;padding: 30rpx 0;">
					<span @click="isckickTime(1)" style="color: #010101;"><span
							style="padding: 10rpx;">{{parms.startTime|| '请选择'}}</span>
						<u-icon name="arrow-down-fill" color="#a7a7a7" size="30"></u-icon> </span>
					<span style="padding: 0 40rpx;">至</span>
					<span @click="isckickTime(2)" style="color: #010101;"><span
							style="padding: 10rpx;">{{parms.endTime|| '请选择'}}</span>
						<u-icon name="arrow-down-fill" color="#a7a7a7" size="30"></u-icon> </span>
				</div>
			</view>
			<view class="lsitreat" v-for="(item,index) in tabList" :key="index" @click="listAdtops(item)">
				<view class="toptitle fliexs space_between">
					<span class="names">{{item.studentName}}</span>
				</view>
				<view class="list_btns colors">
					<view style="font-size: 30rpx; font-weight: bold;padding: 20rpx 0;">
						{{item.classYear}}-{{item.classDate}} {{item.classStartTime}}~{{item.classEndTime}}
					</view>
					<div class="lisntcenter fliexs">
						<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;">{{item.coachName}} {{item.classInfo.courseName}}</span>
					</div>
					<div class="lisntcenter fliexs">
						<u-icon name="map" size="28"></u-icon> <span style="padding-left: 10rpx;">{{item.campusName}}</span>
					</div>
					<div class="lisntcenter fliexs space_between">
						<span><u-icon name="error-circle" size="28"></u-icon> <span style="padding-left: 10rpx;">本节课已登记考勤</span></span> <span class="cardtitle" v-if="item.isAttendance != 0">不予请假</span>
					</div>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate" confirm-color="#E62131"></u-picker>
		
		<u-modal v-model="show" :title="'请假'" :title-style="{fontWeight: 'bold',fontSize: '30rpx'}" @confirm="conmodalfirm">
			<view class="slot-content" style="padding: 0 30rpx;">
				<u-form :model="form" ref="uForm" label-width="150rpx" label-position="top">
					<u-form-item label="请假原因:">
						<u-input v-model="form.askContent" type="textarea" :border="true" :height="100"
							:auto-height="true" />
					</u-form-item>
					<u-form-item label="请假类型:">
						<u-radio-group v-model="textaskType">
							<u-radio v-for="(item, index) in typelist" :key="index"
								@change="radioChange($event,item.value)" :name="item.name"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showdate: false,
				dateparams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				dateindex: 1,
				typelist: [{
					value: 0,
					name: '病假',
					disabled: false
				}, {
					value: 1,
					name: '事假',
					disabled: false
				}, {
					value: 2,
					name: '其他',
					disabled: false
				}],
				textaskType:"",
				form: {
					askType: '',
					askContent: '',
					workId: '',
					studentId: '',
				},
				parms: {
					startTime: '',
					endTime: '',
					limit: 10,
					page: 1,
				},
				tabList:[],

			}
		},

		onLoad() {

		},
		onShow() {
			this.sherchList()
		},
		onReachBottom() {
			this.parms.page += 1
			this.studentaskListApi()
		},
		methods: {
			conmodalfirm(){
				uni.$api.common.studentaskAdd(this.form).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.show = false;
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						})
					}, 2000)
				});
			},
			radioChange(e, value) {
				this.form.askType = value
			},
			sherchList() {
				this.parms.page = 1;
				this.tabList = [];
				this.studentaskListApi()
			},
			studentaskListApi() {
				uni.$api.common.studentworkstudentAskList(this.parms).then((res) => {
					if (res.count === this.tabList.length) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
							duration: 2000
						});
					} else {
						res.result.forEach((item) => {
							this.tabList.push(item)
						})
					}
					
				});
			},
			// 去详情
			listAdtops(item) {
				if(item.isAttendance != 0){
					uni.showToast({
						title: '该节课不予请假',
						icon: 'none',
						duration: 2000
					});
				}else{
					this.form.workId = item.workId
					this.form.studentId = item.studentId
					this.show = true;
				}
			},
			okllists() {
				uni.navigateTo({
					url: "./classCourse"
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.parms.startTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 2) {
					this.parms.endTime = e.year + '-' + e.month + '-' + e.day
					this.sherchList()
				}
			},

			
		}
	}
</script>
<style lang="scss">
	.lsitreat {
		padding: 20rpx 30rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		.toptitle {
			.names {
				font-weight: bold;
	
				
			}
		}
	
		.tiext_center {
			width: 100%;
			margin: 10rpx 0;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
		}
		.lisntcenter{
			margin-top: 10rpx;
		}
		.cardtitle {
			display: inline-block;
			padding: 2rpx 6rpx;
			// background-color: #f2f2f2;
			border: 1rpx solid #E62131;
			border-radius: 5rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
			color: #E62131;
		}
	}
	// .topchenlistd {
	// 	position: fixed;
	// 	left: 0;
	// 	right: 0;
	// 	margin: auto;
	// 	background-color: #ffffff;
	// 	z-index: 22;
	// 	padding: 30rpx 30rpx 15rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// }
</style>